<template>
  <div>
    <div class="head-back">
      <div class="w">
        <i class="el-icon-back" @click="back()">&nbsp;课程中心</i>
      </div>
    </div>
    <div class="content">
      <div class="w">
        <h1>消息中心</h1>
        <div class="content-inform">
          <div class="sidebar">
            <ul ref="msg">
<!--              绑定多个事件用;隔开即可-->
              <li data-index="1" @click="select($event)" class="select active">未读消息<i class="count">11</i></li>
              <li data-index="2" @click="select($event)" class="select">已读消息<i class="count">0</i></li>
            </ul>
          </div>
          <div class="information">
            <ul>
              <li v-show="showOne">
                <el-empty class="information-img" description="这里空空如也" v-if="false" />
                <!--                  未读信息-->
                  <ul class="message">
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li> <li class="el-icon-chat-dot-square">
                    <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                    <span class="message-title">收到来自<i>老八</i>的信息</span>
                  </li> <li class="el-icon-chat-dot-square">
                    <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                    <span class="message-title">收到来自<i>老八</i>的信息</span>
                  </li> <li class="el-icon-chat-dot-square">
                    <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                    <span class="message-title">收到来自<i>老八</i>的信息</span>
                  </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>
                    <li class="el-icon-chat-dot-square">
                      <i class="message-date">2023年1月10日&nbsp;12:13:22</i>
                      <span class="message-title">收到来自<i>老八</i>的信息</span>
                    </li>





                  </ul>
              </li>
              <li v-show="showTwo">
                <el-empty class="information-img" description="这里空空如也" v-if="true" />
                <!--                已读信息-->
                <ul class="message">
<!--                  <li class="el-icon-chat-dot-square">-->
<!--                    <i class="message-date">2023年1月10号</i>-->
<!--                    <span class="message-title">收到来自<i>老八</i>的信息</span>-->
<!--                  </li>-->
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      count: 12,
      // 用于切换显示内容
      showOne: true,
      showTwo: false,
    };
  },

  created() {
  },
  methods: {
    back(){
      this.$router.push('/user');
    },
    // 切换侧边栏样式和切换显示内容
    select(e) {
      let msg = this.$refs.msg
      let lis = msg.querySelectorAll('li');
      // 切换侧边栏样式
      for (let i = 0; i < lis.length; i++){
        lis[i].className = 'select';
      }
      e.target.className = 'active select'; // 样式类名
      // 切换显示内容
      if (e.target.dataset.index == 1){
        this.showOne = true;
        this.showTwo = false;
      } else {
        this.showOne = false;
        this.showTwo = true;
      }
    }
    //
  },
  watch: {},
};
</script>
<style src="@/assets/css/inform.css"  scoped></style>
<style scoped>
@import "@/assets/css/base.css";
</style>
